<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霍格沃茨养成游戏</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 20px;
            color: #333;
            min-width: 900px;
        }
        .game-container {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: auto 1fr;
            gap: 15px;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 20px;
            border: 3px solid #5d3a92;
        }
        .header {
            grid-column: 1 / -1;
            background: linear-gradient(135deg, #5d3a92, #8a6dbb);
            color: white;
            padding: 15px 25px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            border-radius: 12px 12px 0 0;
            border-bottom: 3px solid #4a2d7a;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sidebar {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .main-content {
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 15px;
        }
        .player-panel {
            background-color: #f5f0ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: 15px;
        }
        .player-avatar {
            width: 100px;
            height: 100px;
            background-color: #e6d9ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #5d3a92;
            border: 3px solid #8a6dbb;
        }
        .player-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .info-item {
            font-size: 14px;
        }
        .info-label {
            color: #5d3a92;
            font-weight: bold;
            margin-right: 5px;
        }
        .content-area {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 15px;
        }
        .story-panel {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .interaction-panel {
            display: grid;
            grid-template-rows: auto auto;
            gap: 15px;
        }
        .event-panel, .npc-panel {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .panel-title {
            color: #5d3a92;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        .panel-title i {
            margin-right: 8px;
            font-size: 20px;
        }
        .event-card, .npc-card {
            background-color: white;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            border-left: 4px solid #8a6dbb;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .event-title, .npc-name {
            font-weight: bold;
            color: #5d3a92;
            margin-bottom: 5px;
            font-size: 16px;
        }
        .event-desc, .npc-desc {
            font-size: 14px;
            line-height: 1.5;
        }
        .time-control {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 8px;
            margin-top: 15px;
        }
        .time-button {
            background: linear-gradient(135deg, #8a6dbb, #5d3a92);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }
        .time-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        .current-time {
            font-weight: bold;
            color: #5d3a92;
            font-size: 16px;
        }
        .nav-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        .nav-button {
            background: linear-gradient(135deg, #8a6dbb, #5d3a92);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            text-align: center;
        }
        .nav-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        .progress-bar {
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            margin-top: 5px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #8a6dbb, #5d3a92);
            border-radius: 4px;
            width: 65%;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .stat-item {
            font-size: 13px;
        }
        .house-badge {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            background-color: #3498db;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 15px;
        }
        .ravenclaw {
            background: linear-gradient(135deg, #0e1a40, #946b2d);
        }
        .gryffindor {
            background: linear-gradient(135deg, #740001, #d3a625);
        }
        .slytherin {
            background: linear-gradient(135deg, #1a472a, #aaaaaa);
        }
        .hufflepuff {
            background: linear-gradient(135deg, #ecb939, #372e29);
        }
        .options {
            margin-top: 15px;
        }
        .option-button {
            display: block;
            width: 100%;
            padding: 8px;
            margin-bottom: 8px;
            background-color: white;
            border: 1px solid #8a6dbb;
            border-radius: 6px;
            color: #5d3a92;
            cursor: pointer;
            transition: all 0.3s;
            text-align: left;
        }
        .option-button:hover {
            background-color: #f0e5ff;
            transform: translateX(5px);
        }
        .inventory-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px dashed #d9c2ff;
            cursor: pointer;
        }
        .inventory-item:hover {
            background-color: #f0e5ff;
        }
        .item-icon {
            width: 30px;
            height: 30px;
            background-color: #8a6dbb;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 10px;
            font-size: 14px;
        }
        .item-name {
            font-weight: bold;
            color: #5d3a92;
        }
        .item-quantity {
            margin-left: auto;
            color: #8a6dbb;
            font-weight: bold;
        }
        .hidden {
            display: none;
        }
        .back-button {
            background: linear-gradient(135deg, #8a6dbb, #5d3a92);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
        }
        .inventory-panel {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .social-panel {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .map-panel {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .skills-panel {
            background-color: #f9f3ff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #d9c2ff;
        }
        .relationship-meter {
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            margin-top: 5px;
            overflow: hidden;
        }
        .relationship-fill {
            height: 100%;
            background: linear-gradient(90deg, #8a6dbb, #5d3a92);
            border-radius: 4px;
        }
        .location-item {
            padding: 8px;
            border-bottom: 1px dashed #d9c2ff;
            cursor: pointer;
        }
        .location-item:hover {
            background-color: #f0e5ff;
        }
        .skill-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px dashed #d9c2ff;
        }
        .skill-name {
            font-weight: bold;
            color: #5d3a92;
            width: 120px;
        }
        .skill-level {
            flex-grow: 1;
        }
        .item-detail {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-top: 10px;
            border: 1px solid #d9c2ff;
        }
        .item-detail-title {
            font-weight: bold;
            color: #5d3a92;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .item-detail-desc {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .use-button {
            background: linear-gradient(135deg, #8a6dbb, #5d3a92);
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }
        .npc-detail {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-top: 10px;
            border: 1px solid #d9c2ff;
        }
        .npc-detail-title {
            font-weight: bold;
            color: #5d3a92;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .npc-detail-desc {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .npc-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .npc-stat-item {
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="header">
            <div>✨ 霍格沃茨魔法学校 ✨</div>
            <div class="current-time" id="current-time">1991年9月1日 星期日 上午9:15 ☀️</div>
        </div>
        
        <div class="sidebar">
            <div class="house-badge ravenclaw" id="house-badge">R</div>
            <div class="panel-title"><i>🧙</i> 角色状态</div>
            <div class="stats-grid" id="stats-grid">
                <!-- 动态生成 -->
            </div>
            
            <div class="panel-title" style="margin-top: 15px;"><i>🎒</i> 随身物品</div>
            <div id="inventory-items">
                <!-- 动态生成 -->
            </div>
            
            <div class="nav-buttons">
                <button class="nav-button" id="btn-backpack">📚 背包</button>
                <button class="nav-button" id="btn-social">👥 社交</button>
                <button class="nav-button" id="btn-map">🏰 地图</button>
                <button class="nav-button" id="btn-skills">⚡ 技能</button>
            </div>
        </div>
        
        <div class="main-content">
            <!-- 主游戏界面 -->
            <div id="main-game-interface">
                <div class="player-panel">
                    <div class="player-avatar" id="player-avatar">EF</div>
                    <div class="player-info" id="player-info">
                        <!-- 动态生成 -->
                    </div>
                </div>
                
                <div class="content-area">
                    <div class="story-panel">
                        <div class="panel-title"><i>📖</i> 当前剧情</div>
                        <div id="current-story">
                            <!-- 动态生成 -->
                        </div>
                        
                        <div class="options" id="story-options">
                            <!-- 动态生成 -->
                        </div>
                    </div>
                    
                    <div class="interaction-panel">
                        <div class="event-panel">
                            <div class="panel-title"><i>🎲</i> 随机事件</div>
                            <div id="random-events">
                                <!-- 动态生成 -->
                            </div>
                        </div>
                        
                        <div class="npc-panel">
                            <div class="panel-title"><i>👥</i> NPC互动</div>
                            <div id="npc-interactions">
                                <!-- 动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="time-control">
                    <button class="time-button" id="btn-prev-week">⏪ 上一周</button>
                    <div id="week-info">第1周 | 学年开始</div>
                    <button class="time-button" id="btn-next-week">下一周 ⏩</button>
                </div>
            </div>
            
            <!-- 背包界面 -->
            <div id="backpack-interface" class="hidden">
                <div class="panel-title"><i>🎒</i> 背包</div>
                <div class="inventory-panel">
                    <div id="backpack-items">
                        <!-- 动态生成 -->
                    </div>
                    <div id="item-detail" class="hidden">
                        <!-- 动态生成 -->
                    </div>
                </div>
                <button class="back-button" id="btn-back-from-backpack">返回主界面</button>
            </div>
            
            <!-- 社交界面 -->
            <div id="social-interface" class="hidden">
                <div class="panel-title"><i>👥</i> 社交关系</div>
                <div class="social-panel">
                    <div id="social-relationships">
                        <!-- 动态生成 -->
                    </div>
                    <div id="npc-detail" class="hidden">
                        <!-- 动态生成 -->
                    </div>
                </div>
                <button class="back-button" id="btn-back-from-social">返回主界面</button>
            </div>
            
            <!-- 地图界面 -->
            <div id="map-interface" class="hidden">
                <div class="panel-title"><i>🏰</i> 霍格沃茨地图</div>
                <div class="map-panel">
                    <div id="location-list">
                        <!-- 动态生成 -->
                    </div>
                </div>
                <button class="back-button" id="btn-back-from-map">返回主界面</button>
            </div>
            
            <!-- 技能界面 -->
            <div id="skills-interface" class="hidden">
                <div class="panel-title"><i>⚡</i> 魔法技能</div>
                <div class="skills-panel">
                    <div id="skills-list">
                        <!-- 动态生成 -->
                    </div>
                </div>
                <button class="back-button" id="btn-back-from-skills">返回主界面</button>
            </div>
        </div>
    </div>

    <script>
        // 游戏状态
        const gameState = {
            player: {
                name: "艾琳·弗罗斯特",
                house: "拉文克劳",
                age: 11,
                bloodStatus: "混血",
                wand: "柳木+独角兽毛",
                galleons: 50,
                stats: {
                    magic: 78,
                    stamina: 92,
                    intelligence: 85,
                    courage: 70,
                    affinity: 65,
                    strategy: 80
                },
                inventory: [
                    { id: 1, name: "柳木魔杖", quantity: 1, description: "11英寸，独角兽毛杖芯，相当柔韧。奥利凡德先生说这支魔杖适合有智慧的施法者。" },
                    { id: 2, name: "《魔法理论》", quantity: 1, description: "一年级必备课本，作者阿德贝·沃夫林。书页边缘有你做的密密麻麻的笔记。" },
                    { id: 3, name: "巧克力蛙", quantity: 3, description: "巫师界最受欢迎的糖果之一，每包都附赠一张著名巫师的卡片。", usable: true, effect: "恢复10点体力" },
                    { id: 4, name: "加隆", quantity: 50, description: "巫师货币，1加隆=17西可=493纳特。", usable: false }
                ],
                skills: [
                    { name: "魔咒学", level: 45 },
                    { name: "魔药学", level: 38 },
                    { name: "变形术", level: 40 },
                    { name: "黑魔法防御术", level: 50 },
                    { name: "天文学", level: 35 },
                    { name: "草药学", level: 42 }
                ]
            },
            relationships: [
                { name: "罗恩·韦斯莱", house: "格兰芬多", level: 30, description: "红发男孩，韦斯莱家最小的儿子，性格直率，喜欢下棋和魁地奇。" },
                { name: "哈利·波特", house: "格兰芬多", level: 25, description: "大难不死的男孩，额头上有一道闪电形伤疤，性格勇敢但有些内向。" },
                { name: "赫敏·格兰杰", house: "格兰芬多", level: 20, description: "麻瓜出身的女巫，聪明好学，是年级里最优秀的学生之一。" },
                { name: "德拉科·马尔福", house: "斯莱特林", level: 10, description: "马尔福家的独子，骄傲自负，经常和哈利作对。" }
            ],
            locations: [
                "霍格沃茨特快列车",
                "大礼堂",
                "变形课教室",
                "魔药课教室",
                "黑魔法防御术教室",
                "图书馆",
                "拉文克劳公共休息室",
                "魁地奇球场",
                "禁林边缘",
                "霍格莫德村"
            ],
            currentWeek: 1,
            currentDate: new Date(1991, 8, 1, 9, 15),
            currentLocation: "霍格沃茨特快列车",
            currentWeather: "晴朗",
            currentStory: {
                title: "🚂 霍格沃茨特快列车",
                description: "你坐在开往霍格沃茨的特快列车上，窗外英格兰乡村的风景飞驰而过。车厢里弥漫着巧克力蛙的甜香和南瓜馅饼的温暖气息，几个一年级新生正在兴奋地交换收集到的巫师卡片。\n\n你的行李箱上贴着崭新的\"拉文克劳\"贴纸——这是你从奥利凡德先生那里买魔杖时得到的赠品。虽然分院仪式还没开始，但你相信自己会被分到拉文克劳，就像你妈妈当年一样。\n\n突然，包厢的门被轻轻推开，一个红发男孩探头进来，鼻子上还沾着一点巧克力。他身后跟着一个戴着圆框眼镜的黑发男孩，额头上有一道奇怪的闪电形伤疤...",
                options: [
                    "热情地邀请他们进来：\"当然有空位！\"",
                    "礼貌地点头：\"请进，这里还有位置。\"",
                    "专注看书，只是微微点头示意",
                    "注意到闪电伤疤，惊讶地问：\"你是...哈利·波特？\"",
                    "分享你的巧克力蛙：\"要尝尝吗？我有多余的。\""
                ]
            },
            randomEvents: [
                {
                    title: "👦 包厢访客",
                    description: "\"这里还有空位吗？其他包厢都满了...\"红发男孩腼腆地问道。你注意到他长袍有些旧但很整洁，手里拿着一包拆开的巧克力蛙，鼻子上还沾着一点巧克力。他身后站着那个戴眼镜的男孩，正好奇地打量着你。"
                }
            ],
            npcInteractions: [
                {
                    name: "罗恩·韦斯莱",
                    description: "\"我是罗恩，罗恩·韦斯莱，\"他伸出手，\"这是我第一次去霍格沃茨，我全家都是格兰芬多，除了珀西——他是级长。\"他骄傲地指了指自己破旧的二手魔杖，\"这是查理留下的，有点旧但还能用。\""
                },
                {
                    name: "哈利·波特",
                    description: "这个戴眼镜的男孩安静地站在罗恩身后，当你看向他时，他下意识地摸了摸额头的闪电伤疤。\"我是哈利，\"他小声说，似乎不太习惯自我介绍，\"也是新生。\""
                }
            ]
        };

        // DOM元素
        const elements = {
            currentTime: document.getElementById('current-time'),
            houseBadge: document.getElementById('house-badge'),
            statsGrid: document.getElementById('stats-grid'),
            inventoryItems: document.getElementById('inventory-items'),
            playerAvatar: document.getElementById('player-avatar'),
            playerInfo: document.getElementById('player-info'),
            currentStory: document.getElementById('current-story'),
            storyOptions: document.getElementById('story-options'),
            randomEvents: document.getElementById('random-events'),
            npcInteractions: document.getElementById('npc-interactions'),
            weekInfo: document.getElementById('week-info'),
            mainGameInterface: document.getElementById('main-game-interface'),
            backpackInterface: document.getElementById('backpack-interface'),
            backpackItems: document.getElementById('backpack-items'),
            itemDetail: document.getElementById('item-detail'),
            socialInterface: document.getElementById('social-interface'),
            socialRelationships: document.getElementById('social-relationships'),
            npcDetail: document.getElementById('npc-detail'),
            mapInterface: document.getElementById('map-interface'),
            locationList: document.getElementById('location-list'),
            skillsInterface: document.getElementById('skills-interface'),
            skillsList: document.getElementById('skills-list')
        };

        // 按钮
        const buttons = {
            prevWeek: document.getElementById('btn-prev-week'),
            nextWeek: document.getElementById('btn-next-week'),
            backpack: document.getElementById('btn-backpack'),
            social: document.getElementById('btn-social'),
            map: document.getElementById('btn-map'),
            skills: document.getElementById('btn-skills'),
            backFromBackpack: document.getElementById('btn-back-from-backpack'),
            backFromSocial: document.getElementById('btn-back-from-social'),
            backFromMap: document.getElementById('btn-back-from-map'),
            backFromSkills: document.getElementById('btn-back-from-skills')
        };

        // 初始化游戏
        function initGame() {
            updatePlayerInfo();
            updateStats();
            updateInventory();
            updateCurrentStory();
            updateRandomEvents();
            updateNPCInteractions();
            updateDateDisplay();
            setupEventListeners();
        }

        // 更新玩家信息
        function updatePlayerInfo() {
            const player = gameState.player;
            
            // 更新头像
            elements.playerAvatar.textContent = player.name.split(' ').map(n => n[0]).join('');
            
            // 更新玩家信息
            elements.playerInfo.innerHTML = `
                <div class="info-item">
                    <span class="info-label">姓名:</span> ${player.name}
                </div>
                <div class="info-item">
                    <span class="info-label">学院:</span> ${player.house}
                </div>
                <div class="info-item">
                    <span class="info-label">年龄:</span> ${player.age}岁
                </div>
                <div class="info-item">
                    <span class="info-label">血统:</span> ${player.bloodStatus}
                </div>
                <div class="info-item">
                    <span class="info-label">魔杖:</span> ${player.wand}
                </div>
                <div class="info-item">
                    <span class="info-label">金库:</span> ${player.galleons}加隆
                </div>
                <div class="info-item">
                    <span class="info-label">地点:</span> ${gameState.currentLocation}
                </div>
                <div class="info-item">
                    <span class="info-label">天气:</span> ${gameState.currentWeather}
                </div>
            `;
            
            // 更新学院徽章
            elements.houseBadge.textContent = player.house[0];
            elements.houseBadge.className = 'house-badge ' + player.house.toLowerCase();
        }

        // 更新状态
        function updateStats() {
            const stats = gameState.player.stats;
            elements.statsGrid.innerHTML = '';
            
            for (const [statName, statValue] of Object.entries(stats)) {
                const statItem = document.createElement('div');
                statItem.className = 'stat-item';
                
                const statLabel = document.createElement('div');
                statLabel.className = 'info-label';
                statLabel.textContent = getStatDisplayName(statName) + ':';
                
                const progressBar = document.createElement('div');
                progressBar.className = 'progress-bar';
                
                const progressFill = document.createElement('div');
                progressFill.className = 'progress-fill';
                progressFill.style.width = `${statValue}%`;
                
                progressBar.appendChild(progressFill);
                statItem.appendChild(statLabel);
                statItem.appendChild(progressBar);
                elements.statsGrid.appendChild(statItem);
            }
        }

        // 获取状态显示名称
        function getStatDisplayName(statName) {
            const names = {
                magic: '魔法值',
                stamina: '体力',
                intelligence: '智慧',
                courage: '勇气',
                affinity: '亲和力',
                strategy: '谋略'
            };
            return names[statName] || statName;
        }

        // 更新背包
        function updateInventory() {
            elements.inventoryItems.innerHTML = '';
            gameState.player.inventory.forEach(item => {
                if (item.quantity > 0) {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'inventory-item';
                    itemElement.innerHTML = `
                        <div class="item-icon">${getItemIcon(item.name)}</div>
                        <div class="item-name">${item.name}</div>
                        <div class="item-quantity">${item.quantity}</div>
                    `;
                    elements.inventoryItems.appendChild(itemElement);
                }
            });
        }

        // 获取物品图标
        function getItemIcon(itemName) {
            const icons = {
                '柳木魔杖': '🪄',
                '《魔法理论》': '📖',
                '巧克力蛙': '🍫',
                '加隆': '💰'
            };
            return icons[itemName] || '📦';
        }

        // 更新当前故事
        function updateCurrentStory() {
            elements.currentStory.innerHTML = `
                <div class="event-card">
                    <div class="event-title">${gameState.currentStory.title}</div>
                    <div class="event-desc">
                        ${gameState.currentStory.description.split('\n').join('<br>')}
                    </div>
                </div>
            `;
            
            // 更新选项
            elements.storyOptions.innerHTML = '';
            gameState.currentStory.options.forEach((option, index) => {
                const optionButton = document.createElement('button');
                optionButton.className = 'option-button';
                optionButton.textContent = `${index + 1}. ${option}`;
                optionButton.addEventListener('click', () => selectStoryOption(index));
                elements.storyOptions.appendChild(optionButton);
            });
        }

        // 选择故事选项
        function selectStoryOption(optionIndex) {
            // 这里可以添加选项效果逻辑
            alert(`你选择了选项 ${optionIndex + 1}: ${gameState.currentStory.options[optionIndex]}`);
            
            // 根据选择推进故事
            advanceStory(optionIndex);
        }

        // 推进故事
        function advanceStory(choice) {
            // 这里可以根据选择更新游戏状态
            if (gameState.currentWeek === 1) {
                // 第一周的特殊处理
                if (choice === 4) {
                    // 选择了分享巧克力蛙
                    const chocolateIndex = gameState.player.inventory.findIndex(item => item.name === '巧克力蛙');
                    if (chocolateIndex !== -1) {
                        gameState.player.inventory[chocolateIndex].quantity--;
                        
                        // 提高与罗恩和哈利的关系
                        const ronIndex = gameState.relationships.findIndex(r => r.name === '罗恩·韦斯莱');
                        const harryIndex = gameState.relationships.findIndex(r => r.name === '哈利·波特');
                        
                        if (ronIndex !== -1) gameState.relationships[ronIndex].level += 10;
                        if (harryIndex !== -1) gameState.relationships[harryIndex].level += 5;
                        
                        // 更新亲和力
                        gameState.player.stats.affinity += 5;
                        
                        // 更新故事
                        gameState.currentStory = {
                            title: "🚂 分享零食",
                            description: "你慷慨地分享了你的巧克力蛙，罗恩的眼睛立刻亮了起来。\"太棒了！\"他接过巧克力蛙，迫不及待地拆开包装。\n\n\"谢谢，\"哈利微笑着说，\"我从来没吃过这个。\"他小心地咬了一口，脸上露出惊喜的表情。\n\n罗恩已经吃完了他那份，正研究着附赠的巫师卡片：\"是邓布利多！我已经有六张他的了...\"",
                            options: [
                                "询问罗恩关于巫师卡片收集的事",
                                "问哈利对霍格沃茨有什么期待",
                                "分享你对拉文克劳学院的了解",
                                "询问他们是否知道分院仪式的情况",
                                "安静地听他们聊天"
                            ]
                        };
                    }
                } else if (choice === 3) {
                    // 认出了哈利
                    const harryIndex = gameState.relationships.findIndex(r => r.name === '哈利·波特');
                    if (harryIndex !== -1) gameState.relationships[harryIndex].level += 15;
                    
                    gameState.currentStory = {
                        title: "⚡ 认出哈利",
                        description: "\"你是...哈利·波特？\"你惊讶地问道。\n\n黑发男孩有些局促地点点头，又摸了摸额头的伤疤。罗恩看起来既惊讶又佩服：\"哇，你真的认识他？\"\n\n\"呃，其实...\"哈利看起来有些不自在，\"我只是...\"\n\n车厢里突然安静下来，气氛有些尴尬。",
                        options: [
                            "道歉并解释你只是听说过他的故事",
                            "询问关于他击败神秘人的传闻",
                            "转移话题到分院仪式上",
                            "分享你听说过的关于霍格沃茨的事情",
                            "保持沉默，等他们先开口"
                        ]
                    };
                } else {
                    // 其他选择
                    gameState.currentStory = {
                        title: "🚂 列车上的交谈",
                        description: "你们三人坐下来后，罗恩开始滔滔不绝地讲述他的家庭和他对霍格沃茨的了解。哈利则安静地听着，偶尔问几个问题。\n\n\"我哥哥们说分院仪式要和巨怪搏斗，\"罗恩神秘兮兮地说，\"但珀西说那都是胡说八道。\"\n\n窗外，风景继续飞驰而过，远处的山峦间已经能看到霍格沃茨城堡的轮廓。",
                        options: [
                            "询问更多关于分院仪式的事",
                            "分享你对霍格沃茨的了解",
                            "问哈利对即将到来的学校生活有什么期待",
                            "拿出你的《魔法理论》复习",
                            "看向窗外，欣赏风景"
                        ]
                    };
                }
                
                // 更新随机事件
                gameState.randomEvents = [
                    {
                        title: "🍬 零食小推车",
                        description: "车厢门再次打开，这次是一位笑容可掬的女巫推着零食车：\"亲爱的，要买点什么吗？有巧克力蛙、南瓜馅饼、比比多味豆...\""
                    }
                ];
                
                // 更新NPC互动
                gameState.npcInteractions = [
                    {
                        name: "罗恩·韦斯莱",
                        description: "\"你有喜欢的魁地奇球队吗？\"罗恩问道，\"我支持查理的球队，虽然他们今年表现不太好。\""
                    },
                    {
                        name: "哈利·波特",
                        description: "\"我从没玩过魁地奇，\"哈利承认道，\"但听起来很有趣。\"他好奇地看着窗外飞过的鸟儿。"
                    }
                ];
            }
            
            // 更新UI
            updatePlayerInfo();
            updateStats();
            updateInventory();
            updateCurrentStory();
            updateRandomEvents();
            updateNPCInteractions();
        }

        // 更新随机事件
        function updateRandomEvents() {
            elements.randomEvents.innerHTML = '';
            gameState.randomEvents.forEach(event => {
                const eventElement = document.createElement('div');
                eventElement.className = 'event-card';
                eventElement.innerHTML = `
                    <div class="event-title">${event.title}</div>
                    <div class="event-desc">
                        ${event.description}
                    </div>
                `;
                elements.randomEvents.appendChild(eventElement);
            });
        }

        // 更新NPC互动
        function updateNPCInteractions() {
            elements.npcInteractions.innerHTML = '';
            gameState.npcInteractions.forEach(npc => {
                const npcElement = document.createElement('div');
                npcElement.className = 'npc-card';
                npcElement.innerHTML = `
                    <div class="npc-name">${npc.name}</div>
                    <div class="npc-desc">
                        ${npc.description}
                    </div>
                `;
                elements.npcInteractions.appendChild(npcElement);
            });
        }

        // 更新日期显示
        function updateDateDisplay() {
            const date = gameState.currentDate;
            const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const dayName = days[date.getDay()];
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const timeString = hours < 12 ? `上午${hours}:${minutes.toString().padStart(2, '0')}` : `下午${hours-12}:${minutes.toString().padStart(2, '0')}`;
            
            elements.currentTime.textContent = `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${dayName} ${timeString} ${getWeatherEmoji()}`;
            elements.weekInfo.textContent = `第${gameState.currentWeek}周 | ${getWeekDescription()}`;
        }

        // 获取天气表情
        function getWeatherEmoji() {
            const weather = gameState.currentWeather;
            const emojis = {
                '晴朗': '☀️',
                '多云': '⛅',
                '雨天': '🌧️',
                '雷雨': '⛈️',
                '下雪': '❄️',
                '雾天': '🌫️'
            };
            return emojis[weather] || '☀️';
        }

        // 获取周描述
        function getWeekDescription() {
            if (gameState.currentWeek === 1) return '学年开始';
            if (gameState.currentWeek === 2) return '课程进行中';
            if (gameState.currentWeek > 2 && gameState.currentWeek < 10) return '学期中';
            if (gameState.currentWeek === 10) return '期中考试';
            if (gameState.currentWeek > 10 && gameState.currentWeek < 20) return '学期中';
            if (gameState.currentWeek === 20) return '期末考试';
            if (gameState.currentWeek === 21) return '学期结束';
            return '霍格沃茨生活';
        }

        // 上一周
        function goToPrevWeek() {
            if (gameState.currentWeek > 1) {
                gameState.currentWeek--;
                gameState.currentDate.setDate(gameState.currentDate.getDate() - 7);
                generateWeekEvents();
                updateDateDisplay();
            } else {
                alert('已经是第一周了！');
            }
        }

        // 下一周
        function goToNextWeek() {
            gameState.currentWeek++;
            gameState.currentDate.setDate(gameState.currentDate.getDate() + 7);
            generateWeekEvents();
            updateDateDisplay();
        }

        // 生成周事件
        function generateWeekEvents() {
            // 这里可以添加更复杂的事件生成逻辑
            if (gameState.currentWeek === 2) {
                gameState.currentLocation = "霍格沃茨大礼堂";
                gameState.currentStory = {
                    title: "🎩 分院仪式",
                    description: "你站在大礼堂里，周围是一年级的新生们。天花板被施了魔法，看起来像外面的夜空。麦格教授拿着一卷羊皮纸和一个破旧的巫师帽——分院帽。\n\n\"当我叫到你的名字，就上前来戴上帽子，\"麦格教授宣布道，\"它会决定你属于哪个学院。\"\n\n你紧张地等待着，看着前面的学生一个个被分到不同的学院。终于，麦格教授叫到了你的名字...",
                    options: [
                        "深呼吸，保持冷静",
                        "回想你希望被分到的学院",
                        "观察四个学院的桌子",
                        "小声和旁边的同学交谈缓解紧张",
                        "思考分院帽会怎么判断你"
                    ]
                };
                
                gameState.randomEvents = [
                    {
                        title: "🏰 霍格沃茨城堡",
                        description: "分院仪式结束后，级长带领你们前往公共休息室。城堡的楼梯会自己移动，画像中的人物会互相交谈，还有几个调皮的幽灵从墙壁里穿进穿出。"
                    }
                ];
                
                gameState.npcInteractions = [
                    {
                        name: "分院帽",
                        description: "\"嗯...有趣，非常有趣，\"分院帽在你脑海中低语，\"有智慧，是的...但也有勇气...我该把你分到哪里呢？\""
                    },
                    {
                        name: "级长",
                        description: "\"欢迎来到拉文克劳！\"级长微笑着说，\"我们的公共休息室在城堡西边的塔楼上，需要回答一个谜题才能进入。\""
                    }
                ];
            } else if (gameState.currentWeek === 3) {
                gameState.currentLocation = "变形课教室";
                gameState.currentStory = {
                    title: "🐭 第一堂变形课",
                    description: "麦格教授严肃地站在讲台上，\"变形术是你们在霍格沃茨将学到的最复杂也是最危险的魔法，\"她说，\"任何人要是敢在我的课堂上捣乱，就立刻出去，永远别回来。\"\n\n她一挥魔杖，把讲台变成了一头猪，然后又变了回来。全班都惊呆了。\"今天，我们要学习把火柴变成针。\"",
                    options: [
                        "专心听麦格教授的讲解",
                        "尝试立刻施展变形咒",
                        "观察其他同学的做法",
                        "记下麦格教授说的每一个要点",
                        "小声和同桌讨论这个咒语"
                    ]
                };
                
                gameState.randomEvents = [
                    {
                        title: "📚 课后作业",
                        description: "麦格教授布置了作业：\"阅读《初级变形指南》第一章，写一篇关于变形术基本理论的论文，下节课前交。\""
                    }
                ];
                
                gameState.npcInteractions = [
                    {
                        name: "麦格教授",
                        description: "\"变形术需要精确的魔杖动作和清晰的意图，\"她巡视着教室，\"不要只是挥动魔杖，要真正想象那根火柴变成针的样子。\""
                    },
                    {
                        name: "赫敏·格兰杰",
                        description: "她已经成功把火柴的一端变尖了，\"这其实不难，\"她小声告诉你，\"关键在于手腕的转动角度。\""
                    }
                ];
            }
            
            // 随机改变天气
            const weatherOptions = ['晴朗', '多云', '雨天', '雷雨', '下雪', '雾天'];
            gameState.currentWeather = weatherOptions[Math.floor(Math.random() * weatherOptions.length)];
            
            // 更新UI
            updatePlayerInfo();
            updateCurrentStory();
            updateRandomEvents();
            updateNPCInteractions();
        }

        // 显示背包界面
        function showBackpack() {
            elements.mainGameInterface.classList.add('hidden');
            elements.backpackInterface.classList.remove('hidden');
            
            // 更新背包物品
            elements.backpackItems.innerHTML = '';
            gameState.player.inventory.forEach(item => {
                if (item.quantity > 0) {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'inventory-item';
                    itemElement.innerHTML = `
                        <div class="item-icon">${getItemIcon(item.name)}</div>
                        <div class="item-name">${item.name}</div>
                        <div class="item-quantity">${item.quantity}</div>
                    `;
                    itemElement.addEventListener('click', () => showItemDetail(item));
                    elements.backpackItems.appendChild(itemElement);
                }
            });
        }

        // 显示物品详情
        function showItemDetail(item) {
            elements.itemDetail.innerHTML = `
                <div class="item-detail-title">${item.name}</div>
                <div class="item-detail-desc">${item.description}</div>
                ${item.usable ? '<button class="use-button">使用</button>' : ''}
            `;
            elements.itemDetail.classList.remove('hidden');
            
            // 添加使用按钮事件
            const useButton = elements.itemDetail.querySelector('.use-button');
            if (useButton) {
                useButton.addEventListener('click', () => useItem(item));
            }
        }

        // 使用物品
        function useItem(item) {
            if (item.name === '巧克力蛙') {
                gameState.player.stats.stamina = Math.min(100, gameState.player.stats.stamina + 10);
                alert(`使用了${item.name}，恢复了10点体力！`);
                
                // 减少物品数量
                const itemIndex = gameState.player.inventory.findIndex(i => i.id === item.id);
                if (itemIndex !== -1) {
                    gameState.player.inventory[itemIndex].quantity--;
                    if (gameState.player.inventory[itemIndex].quantity <= 0) {
                        elements.itemDetail.classList.add('hidden');
                    }
                }
                
                // 更新UI
                updateStats();
                updateInventory();
                showBackpack();
            } else {
                alert(`使用了${item.name}！`);
            }
        }

        // 显示社交界面
        function showSocial() {
            elements.mainGameInterface.classList.add('hidden');
            elements.socialInterface.classList.remove('hidden');
            
            // 更新社交关系
            elements.socialRelationships.innerHTML = '';
            gameState.relationships.forEach(relationship => {
                const relationshipElement = document.createElement('div');
                relationshipElement.className = 'npc-card';
                relationshipElement.innerHTML = `
                    <div class="npc-name">${relationship.name} (${relationship.house})</div>
                    <div class="relationship-meter">
                        <div class="relationship-fill" style="width: ${relationship.level}%"></div>
                    </div>
                `;
                relationshipElement.addEventListener('click', () => showNPCDetail(relationship));
                elements.socialRelationships.appendChild(relationshipElement);
            });
        }

        // 显示NPC详情
        function showNPCDetail(npc) {
            elements.npcDetail.innerHTML = `
                <div class="npc-detail-title">${npc.name} (${npc.house})</div>
                <div class="npc-detail-desc">${npc.description}</div>
                <div class="npc-stats">
                    <div class="npc-stat-item">
                        <span class="info-label">关系等级:</span> ${npc.level}/100
                    </div>
                    <div class="npc-stat-item">
                        <span class="info-label">学院:</span> ${npc.house}
                    </div>
                </div>
            `;
            elements.npcDetail.classList.remove('hidden');
        }

        // 显示地图界面
        function showMap() {
            elements.mainGameInterface.classList.add('hidden');
            elements.mapInterface.classList.remove('hidden');
            
            // 更新地点列表
            elements.locationList.innerHTML = '';
            gameState.locations.forEach(location => {
                const locationElement = document.createElement('div');
                locationElement.className = 'location-item';
                locationElement.textContent = location;
                if (location === gameState.currentLocation) {
                    locationElement.style.fontWeight = 'bold';
                    locationElement.style.color = '#5d3a92';
                }
                elements.locationList.appendChild(locationElement);
            });
        }

        // 显示技能界面
        function showSkills() {
            elements.mainGameInterface.classList.add('hidden');
            elements.skillsInterface.classList.remove('hidden');
            
            // 更新技能列表
            elements.skillsList.innerHTML = '';
            gameState.player.skills.forEach(skill => {
                const skillElement = document.createElement('div');
                skillElement.className = 'skill-item';
                skillElement.innerHTML = `
                    <div class="skill-name">${skill.name}</div>
                    <div class="skill-level">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${skill.level}%"></div>
                        </div>
                    </div>
                `;
                elements.skillsList.appendChild(skillElement);
            });
        }

        // 返回主界面
        function backToMain() {
            elements.mainGameInterface.classList.remove('hidden');
            elements.backpackInterface.classList.add('hidden');
            elements.socialInterface.classList.add('hidden');
            elements.mapInterface.classList.add('hidden');
            elements.skillsInterface.classList.add('hidden');
            elements.itemDetail.classList.add('hidden');
            elements.npcDetail.classList.add('hidden');
        }

        // 设置事件监听器
        function setupEventListeners() {
            buttons.prevWeek.addEventListener('click', goToPrevWeek);
            buttons.nextWeek.addEventListener('click', goToNextWeek);
            buttons.backpack.addEventListener('click', showBackpack);
            buttons.social.addEventListener('click', showSocial);
            buttons.map.addEventListener('click', showMap);
            buttons.skills.addEventListener('click', showSkills);
            buttons.backFromBackpack.addEventListener('click', backToMain);
            buttons.backFromSocial.addEventListener('click', backToMain);
            buttons.backFromMap.addEventListener('click', backToMain);
            buttons.backFromSkills.addEventListener('click', backToMain);
        }

        // 启动游戏
        initGame();
    </script>
</body>
</html>